import React, { useState,useEffect,useCallback } from 'react';

function useWinsize(){
    const[size,setSize]=useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight,
    })
    const refSize=useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    },[])
    
    useEffect(()=>{
        window.addEventListener('resize',refSize)
        return ()=>{
            window.removeEventListener('resize',refSize)
        }
        
    },[])
    return size
}

function Example10(){
    const size=useWinsize()
    return(
        <div>窗口的大小是{size.width}x{size.height}</div>
    )
}
export default Example10
